<template>
  <div>
    <header-top title="班级课表" >
      <div @click="$router.back()" class="back" slot="back"></div>
    </header-top>
    <div class="content clearfix">
      <teacher-class @data = 'getList' />
      <div class="classTable">
        <table class="Table">
          <thead>
          <tr>
            <th width="12.5%"></th>
            <th width="12.5%">星期一</th>
            <th width="12.5%">星期二</th>
            <th width="12.5%">星期三</th>
            <th width="12.5%">星期四</th>
            <th width="12.5%">星期五</th>
            <th width="12.5%">星期六</th>
            <th width="12.5%">星期天</th>
          </tr>

          <tr v-for="item of classTable">
            <td style="background: #e2fbf4">
              <p>{{item.courseTime.timeName}}</p>
              <p>{{item.courseTime.timeFront.slice(0,5)}} - {{item.courseTime.timeAfter.slice(0,5)}}</p>
            </td>

            <td>
              <template v-if="item.courseList.MONDAY">
                <p>{{item.courseList.MONDAY.subjectName}}</p>
                <p>{{item.courseList.MONDAY.teacherName}}</p>
              </template>
            </td>
            <td>
              <template v-if="item.courseList.TUESDAY">
                <p>{{item.courseList.TUESDAY.subjectName}}</p>
                <p>{{item.courseList.TUESDAY.teacherName}}</p>
              </template>
            </td>
            <td>
              <template v-if="item.courseList.WEDNESDAY">
                <p>{{item.courseList.WEDNESDAY.subjectName}}</p>
                <p>{{item.courseList.WEDNESDAY.teacherName}}</p>
              </template>
            </td>
            <td>
              <template v-if="item.courseList.THURSDAY">
                <p>{{item.courseList.THURSDAY.subjectName}}</p>
                <p>{{item.courseList.THURSDAY.teacherName}}</p>
              </template>
            </td>
            <td>
              <template v-if="item.courseList.FRIDAY">
                <p>{{item.courseList.FRIDAY.subjectName}}</p>
                <p>{{item.courseList.FRIDAY.teacherName}}</p>
              </template>
            </td>
            <td>
              <template v-if="item.courseList.SATURDAY">
                <p>{{item.courseList.SATURDAY.subjectName}}</p>
                <p>{{item.courseList.SATURDAY.teacherName}}</p>
              </template>
            </td>
            <td>
              <template v-if="item.courseList.SUNDAY">
                <p>{{item.courseList.SUNDAY.subjectName}}</p>
                <p>{{item.courseList.SUNDAY.teacherName}}</p>
              </template>
            </td>


          </tr>

          </thead>
        </table>
      </div>


    </div>
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import teacherClass from "@/components/teacherClass/teacherClass";
  import {reqClasstimetable} from "@/api";
  import { Toast } from 'vant';   //使用消息提示


  export default {
    name: "classTemplate",
    components:{
      headerTop:headerTop,
      teacherClass:teacherClass,
    },
    data(){
      return{
        classTable:null,
      }
    },
    mounted(){
      let classId = this.$store.state.teacherClass[0].id
      let data = {classId:classId}
      this.getList(data)
    },
    methods:{
      async getList(data){
        let table = await reqClasstimetable(data.classId)
        this.classTable = table.data
      },
    },
  }
</script>

<style scoped>
  .classTable{ width: 100%;  overflow: scroll; padding-bottom: 20px;}
  /*表格*/
  .Table {
    font-size: 0.6rem;
    width: 50rem;
    margin: 0 auto;
    text-align: left;
    color: #464646;
    border-collapse: collapse;
  }

  .Table td, .Table th {
    border: 1px solid #00c08c;
    color: #666;
    height: 4rem;
    line-height: 1.5rem;
    text-align: center;
  }

  .Table thead th {
    background-color: #e2fbf4;
    height: 2.8rem;
  }

  .Table tr:nth-child(odd) {
    background: #fff;
  }

  .Table tr:nth-child(even) {

    background: #fff;

  }
</style>
